import { Canvas } from '@react-three/fiber';
import React, { Suspense, useState, useEffect } from 'react';
import Loading from '../Loading';
import '../index.scss';
import World from './World';
import Foot from './models/Foot';
import Head from './models/Head';
import messageEvent from './proxy/messageEvent';
import Tab from './models/Tab';
import Tab1 from './models/tabs/Tab1';
import Tab2 from './models/tabs/Tab2';
import Tab3 from './models/tabs/Tab3';
import Tab4 from './models/tabs/Tab4';
import Tab5 from './models/tabs/Tab5';
import { motion } from "framer-motion"
import { useSnapshot } from 'valtio';

const HomePage: React.FC = () => {
  const [firstShow, setFirstShow] = useState(true);
  const [loading, setLoading] = useState(false);
  const newMessageEvent = useSnapshot(messageEvent);
  useEffect(() => {
    if (messageEvent) {
      setLoading(true)
    }
  }, [messageEvent]);
  return (
    <div
      style={{
        width: window.innerWidth,
        height: window.innerHeight,
        background: '#181818',
      }}
    >
      <Head></Head>
      <Suspense fallback={<Loading />}>
        <Canvas
          style={{
            width: window.innerWidth,
            height: window.innerHeight - 240,
            background: '#181818',
          }}
          performance={{ min: 0.5 }}
          dpr={[1, 1.5]}
          shadows
          gl={{ alpha: false }}
        >
          <World />
        </Canvas>
        {loading && (
          <div style={{
            marginTop: 0 - window.innerHeight + 240,
            position: "absolute",
            pointerEvents: "none",
            color: '#d4d4d4',
            fontSize: '35px',
            width: '100%',
            height: window.innerHeight - 240,
          }}>
            <div style={{
              width: '100%',
              height: '100%',
              position: "relative",
            }}>
              {
                firstShow ? (
                  <motion.div
                    style={{ marginLeft: 150, }}
                    animate={{ opacity: firstShow ? 1 : 0, y: 130 }}
                    exit={{ opacity: 0 }}
                    transition={{ duration: 0.5 }}
                  >
                    <div>云井智能</div>
                    <div>全新一代项目打包机</div>
                    <div style={{ pointerEvents: "all" }} className='konwMore' onClick={() => {
                      messageEvent.cameraLookAt = [0, 0, 2, 0, -1, -2]
                      setFirstShow(false)
                    }}>
                      了解更多
                    </div>
                  </motion.div>
                ) : (
                  <>
                    {(!firstShow) && (
                      <>
                        {newMessageEvent?.tab === '产品全览' && <Tab1 />}
                        {newMessageEvent?.tab === '机械键盘' && <Tab2 />}
                        {newMessageEvent?.tab === '打包操作' && <Tab3 />}
                        {newMessageEvent?.tab === '智能芯片' && <Tab4 />}
                        {newMessageEvent?.tab === '显示器' && <Tab5 />}
                      </>
                    )}
                    <Tab messageEvent={messageEvent}></Tab>
                  </>
                )
              }
            </div>
          </div>
        )}

      </Suspense>
      <Foot></Foot>
    </div>
  );
};

export default HomePage;
